<template>
  <div class="box">
    <div class="crumbs">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/home/index/index' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item><a href="/exercise">刷题管理</a></el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="operate">
      <div style="padding: 10px">
        <div class="add">
          <el-button type="primary" @click="addTask">添加任务</el-button>
        </div>
        <!-- <div class="bankname">请输入任务名：</div>
        <div class="input">
          <el-input v-model="key" class="w-50 m-2" placeholder="请输入想要查找的任务名" @change="search" />
        </div> -->
      </div>
      <el-skeleton :rows="6" :loading="loading" animated>
        <el-table v-loading="VLoading" class="table" border :data="tableData">
          <el-table-column label="任务标签" width="180">
            <template #default="scope">
              <el-tag>{{ scope.row.tlabels }}</el-tag>
            </template>
          </el-table-column>
          <el-table-column label="任务数量" width="180">
            <template #default="scope">
              <el-tag>{{ scope.row.tcount }}题</el-tag>
            </template>
          </el-table-column>
          <el-table-column label="最小难度" width="180">
            <template #default="scope">
              <el-tag>{{ scope.row.tminLv }}</el-tag>
            </template>
          </el-table-column>
          <el-table-column label="最大难度" width="180">
            <template #default="scope">
              <el-tag>{{ scope.row.tmaxLv }}</el-tag>
            </template>
          </el-table-column>
          <!-- <el-table-column label="当前任务进度" width="180">
          <template #default="scope">
            <el-tag>{{ scope.row.TaskCompletion }}%</el-tag>
          </template>
        </el-table-column> -->
          <el-table-column prop="tbeginTime" label="任务开始时间" width="180" />
          <el-table-column prop="tendTime" label="任务结束时间" width="180" />
          <el-table-column fixed="right" label="操作" width="180">
            <template #default="scope">
              <el-button type="primary" @click="dateliTask(scope)" size="small">
                详情
              </el-button>
              <el-button type="danger" @click="Delete(scope)" size="small">
                删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>
        <div class="paging">
          <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
            :page-sizes="[5, 10, 50, 100]" :page-size="pages.limit" :total="pages.total">
          </el-pagination>
        </div>
      </el-skeleton>
    </div>
  </div>
</template>
<script lang="ts">
import { defineComponent, onMounted, reactive, toRefs } from "vue";
import { Exercise } from "@/utils/Exam/exercise/exercise";
import { Task } from '@/api/Product/exaam';
import router from "@/router";
import { ElMessage } from "element-plus";

const _exam = new Task();

export default defineComponent({
  setup() {
    const data = reactive<Exercise>({
      tableData: [],
      key: "",
      timekey: "",
      checkbox: 0,
      VLoading: false,
      loading: true,
      pages: {
        page: 1,
        limit: 5,
        total: 10,
      },
    });
    const methods = {
      GetTask() {
        _exam.GetTask({
          page: data.pages.page,
          limit: data.pages.limit,
          // key: data.key,
        }).then((res) => {
          if (res.code === 0) {
            res.data.data.forEach((e: any) => {
              e.tbeginTime = e.tbeginTime.replace("T", " ")
              e.tendTime = e.tendTime.replace("T", " ")
            });
            data.loading = false
            data.tableData = res.data.data
            data.pages.total = res.data.total;
          }
        })
      },
      //模糊查询
      search(val: any) {
        data.key = val;
        methods.GetTask();
      },
      Delete(val: any) {
        let dto = {
          tid: val.row.tid
        }
        _exam.DeleteTask(dto).then((res: any) => {
          if (res.code === 0) {
            ElMessage.success(res.message);
            methods.GetTask();
          } else {
            ElMessage.error(res.message)
          }
        })
      },
      //添加任务
      addTask() {
        router.push("/exercise/addExercise");
      },
      dateliTask(val: any) {
        router.push("/exercise/dateliExercise/" + val.row.tid);
      },
      handleSizeChange(val: number) {
        data.pages.limit = val;
        methods.GetTask();
      },
      handleCurrentChange(val: number) {
        data.pages.page = val;
        methods.GetTask();
      },
    };
    onMounted(() => {
      methods.GetTask();
    })
    return {
      ...toRefs(data),
      ...methods,
    };
  },
});
</script>
<style scoped>
.operate {
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  border-radius: 10px;
  padding: 10px;
  margin: 10px;
  background-color: white;
  width: 94%;
}

.crumbs {
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  border-radius: 10px;
  padding: 20px;
  margin: 15px;
  background-color: white;
  width: 94%;
}

.table {
  width: 95%;
  margin: 10px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  border-radius: 10px;
}

.input {
  margin-left: 10px;
  width: 300px;
  display: inline-block;
}

.block {
  display: inline-block;
}

.check {
  margin-left: 30px;
  display: inline-block;
}

.add {
  margin-left: 50px;
  display: inline-block;
}

.delete {
  margin-left: 50px;
  display: inline-block;
}

.paging {
  margin: 20px;
}

.bankname {
  display: inline-block;
  margin-left: 20px;
  padding: 5px;
}
</style>


 